import Icon from "@/components/Icon";
import { useSelector, useDispatch } from "react-redux";
import { RootState, HomeAction } from "@/types/store";
import classnames from "classnames";
import { useInitialState } from "@/utils/use-initial-state";
import { addChannel, delChannel, getAllChannel } from "@/store/actions/home";
import { useState } from "react";
import { Input, Tabs } from "antd-mobile";
import { Channel } from "@/types/data";
type Props = {
  onClose: () => void;
};

const Channels = ({ onClose }: Props) => {
  const dispatch: any = useDispatch();
  const { channelActiveKey } = useSelector((state: RootState) => state.home);
  const onChannelClick = (key: string, channel: Channel) => {
    if (!isEdit) {
      dispatch({ type: "home/changeTab", payload: key });
      onClose();
      return;
    }
    if (channel.id === 0) return;
    if (userChannel.length <= 4) return;
    dispatch(delChannel(channel));
    dispatch(addChannel(channel));
    setDeletedChannels([...deletedChannels, channel]);
  };
  const onTabChange = (key: string) => {
    dispatch({ type: "home/changeTab", payload: key });
  };
  const [isEdit, setIsEdit] = useState(false);
  const [deletedChannels, setDeletedChannels] = useState<Channel[]>([]);
  const restChannel = useInitialState(getAllChannel, "home");

  const { userChannel } = useSelector((state: RootState) => state.home);

  const onChangeEdit = () => {
    setIsEdit(!isEdit);
  };
  const onAddChannel = (channel: Channel) => {
    let { id } = channel;
    let seq = userChannel.length;
    dispatch(addChannel(channel,id, seq))
  };
  return (
    // ...
    <div className="channel_list">
      <div
        className="channel-header"
        style={{ display: "flex", flexDirection: "column" }}
      >
        <div
          className={classnames("channel-item", isEdit && "edit")}
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexDirection: "column",
          }}
        >
          <div
            style={{
              height: "30px",
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-end",
              marginRight: "5px",
            }}
          >
            <Icon type="iconbtn_channel_close" onClick={onClose} />
          </div>
          <div style={{ display: "flex", width: "100%", marginLeft: "5px" }}>
            我的频道:
            <input
              type="text"
              placeholder="点击进入频道"
              style={{
                border: "none",
                fontSize: "10px",
                width: "68%",
                outline: "none",
              }}
            />
            <span
              className="channel-item-edit"
              onClick={onChangeEdit}
              style={{
                display: "flex",
                border: "2px solid #fc7539",
                width: "50px",
                justifyContent: "center",
                color: "#fc7539",
                borderRadius: "20px",
              }}
            >
              {isEdit ? "保存" : "编辑"}
            </span>
          </div>
        </div>
        <div>
          {userChannel.map((item) => (
            <span
              key={item.id}
              className={classnames(
                "channel-list-item",
                channelActiveKey === item.id + "" && "selected"
              )}
              onClick={() => onChannelClick(item.id + "", item)}
              style={{
                background: "#f7f8fa",
                margin: "5px",
                width: "80px",
                height: "30px",
                textAlign: "center",
                lineHeight: "30px",
                borderRadius: "30px",
                fontSize: "13px",
                display: "inline-block",
              }}
            >
              {item.name}
              {isEdit && (
                <Icon
                  type="iconbtn_tag_close"
                  onClick={() => onChannelClick(item.id + "", item)}
                />
              )}
            </span>
          ))}
        </div>
        {/* 选中时，添加类名 selected */}
        <div>
          <p style={{ marginLeft: "10px" }}>可选频道:</p>
          {restChannel.restChannel.map((item: any) => (
            <span
              key={item.id}
              className={classnames(
                "channel-list-item",
                channelActiveKey === item.id + "" && "selected"
              )}
              onClick={() => onAddChannel(item)}
              style={{
                background: "#f7f8fa",
                margin: "5px",
                width: "80px",
                height: "30px",
                textAlign: "center",
                lineHeight: "30px",
                borderRadius: "30px",
                fontSize: "13px",
                display: "inline-block",
                borderBottom: "none",
              }}
            >
              +{item.name}
              <Tabs activeKey={channelActiveKey} onChange={onTabChange}></Tabs>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};
export default Channels;
